<template>
	<view class="multiple-select-list">
		<!-- 操作栏 -->
		<view class="operation-bar">
			<view class="left-actions">
				<checkbox :checked="isAllSelected" @change="handleSelectAll" class="checkbox-all" />
				<text class="all-text">全选</text>
				<text class="invert-select" @click="handleInvertSelect">反选</text>
			</view>
			<text class="selected-count">已选择 人</text>
		</view>

		<!-- 列表内容 -->
		<view class="list-container" v-for="item in friendLists" :key="item.id">
			<view class="list-item">
				<checkbox class="item-checkbox" />
				<text class="item-text">lb</text>
			</view>

			<button type="primary" click="add">添加</button>
			<button>取消</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	// 获取token
	const token = uni.getStorageSync('token');

	// 添加群聊成员
	const add = async () => {
		await uni.request({
			url: "http://192.168.1.200:8080/groupInfo/addGroupMembers",
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'token': token,
			},
			data: {
				userIds: 1,
				groupId: 1
			}
		})


		// 跳转到首页
		uni.navigateTo({
			url: "/pages/index/index"
		})
	}


	// 好友Id的列表
	const IDLists = ref([])
	//好友列表
	const friendLists = ref([])
	onLoad(async () => {
		// 获取所有好友
		const getFriendLists = await uni.request({
			url: "http://192.168.1.200:8080/friendship/friendPage",
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'token': token,
			}
		})

		FriendLists.value = getFriendLists.data.data




	})
</script>

<style scoped lang="scss">
	.multiple-select-list {
		background-color: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.operation-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.left-actions {
		display: flex;
		align-items: center;
	}

	.checkbox-all {
		margin-right: 15rpx;
		transform: scale(0.8);
	}

	.all-text {
		font-size: 28rpx;
		color: #333333;
		margin-right: 30rpx;
	}

	.invert-select {
		font-size: 28rpx;
		color: #007aff;
		padding: 10rpx 0;
	}

	.selected-count {
		font-size: 26rpx;
		color: #666666;
	}

	.list-container {
		max-height: 600rpx;
		overflow-y: auto;

		button {
			display: inline-block;
			width: 300rpx;
			margin-left: 50rpx;

		}
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: background-color 0.2s;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.list-item.item-selected {
		background-color: #f0f7ff;
	}

	.item-checkbox {
		margin-right: 20rpx;
		transform: scale(0.85);
	}

	.item-text {
		font-size: 28rpx;
		color: #333333;
		flex: 1;
	}

	/* 解决nvue下的样式问题 */
	::v-deep checkbox {
		/* 可根据需要调整复选框样式 */
	}
</style>